/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-06-12 15:16:42
 * @LastEditTime : 2023-06-20 11:31:28
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\HomePage\Invest.jsx
 * @Description  :
 */

import './Scss/Invest.scss'
import { Http } from '../../../../Api'
import { useEffect, useState } from 'react'
import { ICON } from '../../../../Configure/Icon'
import { colorRgb } from '../../../../Configure/Common'
import { useRequest, useSessionStorageState } from 'ahooks'

// 迷你投资进度
export const Invest001 = () => {
    const [temporaryData] = useSessionStorageState('temporaryData')
    const [backColor, setBackColor] = useState()
    const [Data, setData] = useState([
        { uuid: 1, title: '总投资额', value: 0, icon: 'IconHoutaiShouyetouzikongjian' },
        { uuid: 2, title: '累计投资', value: 0, icon: 'IconHoutaiShouyetouzikongjianbeifen' },
        { uuid: 3, title: '本年投资', value: 0, icon: 'IconAHoutaiShouyetouzikongjianbeifen8' },
        { uuid: 4, title: '本月投资', value: 0, icon: 'yuetouzi' },
    ])
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list } = res
            const [{ totalAmount, accumulativeAmount, thisYearAmount, thisMonthAmount }] = list
            Data.find(v => v.uuid === 1).value = (totalAmount || 0) / 10000
            Data.find(v => v.uuid === 2).value = (accumulativeAmount || 0) / 10000
            Data.find(v => v.uuid === 3).value = (thisYearAmount || 0) / 10000
            Data.find(v => v.uuid === 4).value = (thisMonthAmount || 0) / 10000
            setBackColor(`rgba(${colorRgb(temporaryData.themeColor, 1)},0.1)`)
            setData([...Data])
        },
    })

    useEffect(() => {
        runAsync({ url: 'getInvestMonthStat2Statistics' })
    }, [runAsync])

    return (
        <div className="Invest001">
            <div className="HomePageTitle">投资概况</div>
            <div className="list" style={{ '--theme': temporaryData.themeColor, '--backColor': backColor }}>
                {Data.map(({ uuid, title, value, icon }) => (
                    <div key={uuid}>
                        <div>{ICON[icon]}</div>
                        <div>
                            <div>{title}</div>
                            <div>
                                {value} <span>万</span>{' '}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export const Invest002 = () => {
    const [temporaryData] = useSessionStorageState('temporaryData')
    const [backColor, setBackColor] = useState()
    const [Data, setData] = useState([
        { uuid: 1, title: '总投资额', value: 0, icon: 'IconHoutaiShouyetouzikongjian' },
        { uuid: 2, title: '累计投资', value: 0, icon: 'IconHoutaiShouyetouzikongjianbeifen' },
        { uuid: 3, title: '本年计划', value: 0, icon: 'IconAHoutaiShouyetouzikongjianbeifen8' },
        { uuid: 4, title: '本年实际', value: 0, icon: 'IconAHoutaiShouyetouzikongjianbeifen8' },
    ])
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list } = res
            const [{ totalStaAmount, totalInvestAmount, yearPlanAmount, yearStaAmount }] = list
            Data.find(v => v.uuid === 1).value = (totalStaAmount || 0) / 10000
            Data.find(v => v.uuid === 2).value = (totalInvestAmount || 0) / 10000
            Data.find(v => v.uuid === 3).value = (yearPlanAmount || 0) / 10000
            Data.find(v => v.uuid === 4).value = (yearStaAmount || 0) / 10000
            setBackColor(`rgba(${colorRgb(temporaryData.themeColor, 1)},0.1)`)
            setData([...Data])
        },
    })

    useEffect(() => {
        runAsync({ url: 'getInvestMonthStatistics' })
    }, [runAsync])

    return (
        <div className="Invest002">
            <div className="HomePageTitle">投资概况</div>
            <div className="list" style={{ '--theme': temporaryData.themeColor, '--backColor': backColor }}>
                {Data.map(({ uuid, title, value, icon }) => (
                    <div key={uuid}>
                        <div>{ICON[icon]}</div>
                        <div>
                            <div>{title}</div>
                            <div>
                                {value} <span>万</span>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

// 工建
export const Invest003 = () => {
    const [temporaryData] = useSessionStorageState('temporaryData')
    const [backColor] = useState()
    const [Data] = useState([
        { uuid: 1, title: '累计营业收入', value: 'c110', unit: '万元', icon: 'touzi002' },
        { uuid: 2, title: '累计利润总额', value: 'c390', unit: '万元', icon: 'zongtouzi' },
        {
            uuid: 3,
            title: '年度利润总额考核指标',
            value: 'c410',
            unit: '万元',
            icon: 'IconAHoutaiShouyetouzikongjianbeifen8',
        },
        { uuid: 4, title: '利润率', value: 'per', unit: '%', icon: 'IconHoutaiShouyetouzikongjianbeifen' },
    ])
    const [Value, setValue] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => setValue(res.list[0]),
    })

    useEffect(() => {
        runAsync({ url: 'getProgressGetCost' })
    }, [runAsync])

    return (
        <div className="Invest002">
            <div className="HomePageTitle">成本统计</div>
            <div className="list" style={{ '--theme': temporaryData.themeColor, '--backColor': backColor }}>
                {Data.map(({ uuid, title, value, icon, unit }) => (
                    <div key={uuid}>
                        <div>{ICON[icon]}</div>
                        <div>
                            <div>{title}</div>
                            <div>
                                {Value && Value[value]} <span>{unit}</span>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}
